<template>
  <div>
     <input autofocus ref="msg" type="text" :value="msg" @input="msg=$event.target.value">
     <p>{{msg}}</p>
     <hr>
     <MyInput :value="abc" @input="abc=$event"></MyInput>
     {{abc}}
     <hr>
     <MyInput v-model="abc" ref="abc"></MyInput>
     <hr>
     <MyCeshi v-model="val" ref="val"></MyCeshi>
     <hr>
     <button @click="fn">vue方式获取元素</button>
     <hr>
     <button v-if="flag" @click="foc">按钮</button>
     <input type="text" v-else ref="txt" @blur="flag=true">
   </div>
</template>
 
<script>
import MyInput from './MyInput.vue'
import MyCeshi from './MyCeshi.vue'
MyCeshi
export default {
  name: "App",
  components: {
    MyInput,
    MyCeshi,
  },
  props: {},
  data() {
    return {
      msg:'123',
      abc:'456',
      val:0,
      flag:true
    };
  },
  computed: {
    
  },
  watch: {},
  created() {},
  methods: {
    fn(){
      console.log(this.$refs)
      console.log(this.$refs.abc)
    },
    foc(){
      this.flag=false
      this.$nextTick(()=>{
        this.$refs.msg.blur()
        this.$refs.txt.focus()
        this.$refs.txt.style.backgroundColor="lightblue"
        this.$refs.txt.style.color="#fff"
      })
    }

  }
};
</script>

<style scoped>
     
</style>